<template>
  <div class="table">

    <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      background: '#9137f3',
      color: '#ffffff',
      height: '60px',
      'font-size': '14px', 'text-align': 'center',
    }">
      <el-table-column property="orderNum" label="订单编号" width="115" align="center" />
      <el-table-column label="用户微信昵称" width="110" property="wechatName" align="center">
      </el-table-column>
      <el-table-column property="userPhone" width="110" label="用户手机号码" align="center" />
      <el-table-column property="courseName" label="课程名称" align="center" />
      <el-table-column property="id" label="课程编号" align="center" />
      <el-table-column property="coursePrice" label="订单金额(元)" align="center" />
      <el-table-column property="orderStatus" label="订单状态" align="center" />
      <el-table-column property="submitTime" label="提交时间" width="110" align="center" />
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <span class="btn1" @click="tz(scope.row.orderNum)">查看订单</span>
          <span v-if="scope.row.orderStatus == '学习中'" @click="aadd(scope.row.orderNum, '取消订单')" class="btn1">取消订单</span>
          <span v-if="scope.row.orderStatus == '待支付'" @click="aadd(scope.row.orderNum, '取消订单')" class="btn1">取消订单</span>
          <span v-if="scope.row.orderStatus === '已结束'" @click="aadd(scope.row.orderNum, '删除订单')"
            class="btn1">删除订单</span>
          <span v-if="scope.row.orderStatus === '学习中'" @click="aadd(scope.row.orderNum, '结束课程')"
            class="btn1">结束课程</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: right;margin-top: 20px;">
      <div class="total">
        <span style="font-family:'思源黑体';font-weight:400;">共</span>
        <span style="font-family:'思源黑体 Bold', '思源黑体 ,Regular';font-weight:700;color:#9137F3;">{{
            Math.ceil(total / limit)
        }}</span>
        <span style="font-family:'思源黑体';font-weight:400;">页/</span>
        <span style="font-family:'思源黑体 Bold', '思源黑体 Regular', '思源黑体';font-weight:700;color:#9137F3;">{{ total
        }}</span>
        <span style="font-family:'思源黑体';font-weight:400;">条数据</span>
        <el-pagination v-model:page-size="limit" :page-sizes="[10, 20, 30]" default background
          @current-change="changePage" layout="prev, pager, next" :total="total" class="mt-4" />
      </div>
    </div>
    <!--对话框 -->
    <el-dialog v-model="cancelTheOrder" :title="title" width="30%" center>
      <el-form :model="form">
        <el-form-item label="备注操作">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelTheOrder = false">取消</el-button>
          <el-button type="primary" @click="operation">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ElDialog,
  ElPagination,
  ElTableColumn,
  ElCard,
  ElCol,
  ElInput,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElButton,
  ElTabs,
  ElTabPane,
  ElTable,
  ElMessage
} from "element-plus"
import axios from '../utils/http';
import { defineProps, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
let tableData = ref()
let tableDataB = ref()
let page = ref(1);
let limit = ref(10);
let total = ref(0);
const router = useRouter();
let changePage = function (value) {
  page.value = value;
  query();
};
let cancelTheOrder = ref(false)
let title = ref("")
const form = ref({ remark: "" });
const orderOperation = {
  id: 0,
  //操作内容
  operateMsg: "",
  // 操作人
  operatePerson: "aa",
  //操作时间
  operateTime: "",
  // 订单编号
  orderId: "",
  //备注
  remark: ""
}
const tz = function (orderNum) {
  console.log(orderNum);
  router.replace({
    name: "Order-detail",
    query: {
      orderNum: orderNum
    }
  });
}
//订单操作
const aadd = (orderId, titleA) => {
  title.value = titleA
  orderOperation.operateMsg = titleA
  cancelTheOrder.value = true
  orderOperation.orderId = orderId
  console.log('wew', orderOperation);
}
//操作接口

const operation = () => {
  orderOperation.remark = form.value.remark
  axios({
    url: "/operation/update",
    method: "post",
    data: {
      orderOperation
    }
  }).then((res) => {
    console.log('结果', res.data);
    if (res.data.code == 0) {
      form.value.remark = ""
      cancelTheOrder.value = false
      ElMessage({
        message: `${orderOperation.operateMsg}成功`,
        type: 'success',
      })
    }
  })

}
const query=()=>{
  axios({
    url: "/order/queryAll",
    params: {
      page: page.value,
      limit: limit.value,
      status: orderStatus
    }
  }).then((res) => {
    console.log(res.data.data);
    if (res.data.code == 0) {
      tableData.value = res.data.data
      total.value=tableData.value.length
    }
  })
}
const { orderStatus } = defineProps(['orderStatus'])
onMounted(() => {
  console.log('ggg', orderStatus);
  query()
  axios({
    url: "/order/queryAll",
    params: {
      page: page.value,
      limit: 100,
      status: orderStatus
    }
  }).then((res) => {
    console.log(res.data.data);
    if (res.data.code == 0) {
      tableDataB.value = res.data.data
      total.value=tableDataB.value.length
    }
  })
})
</script>

<style lang="less" scoped>
.table {

  .btn1 {
    color: #9137f3;
    background-color: white;
    border: 1px solid white;
    margin-left: 20px;
    cursor: pointer;
  }
  .total {
    margin-top: 50px;
    margin-right: 28.8px;
    font-size: 12px;
    color: #333333;
    display: flex;
    align-items: center;
    float: right;
}
}
</style>
<style lang="less">
.table {

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev {
    border-radius: 16px;
    border: 1px solid #9239f3;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev:hover {
    color: #ffffff;
    background-color: #9239f3;
  }

  .el-pagination.is-background .btn-next:disabled,
  .el-pagination.is-background .btn-prev:disabled {
    color: #9239f3;
    background-color: #ffffff;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    color: #9239f3;
    background-color: #ffffff;
    border: 1px solid #9239f3;
  }

  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #9239f3;
  }

  .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    color: #ffffff;
    background-color: #9239f3;
  }
  
}
</style>